<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3d廣告</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        li{
            list-style: none;
        }

        body{
            perspective: 200px;
        }

        ul{
            margin: 100px auto;
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: xuanZhuan 4s linear 0s infinite normal;
        }

        ul li{
            width: 100%;
            height: 100%;
            line-height: 100px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
        }

        @keyframes xuanZhuan{
            from{
                transform: rotateX(0deg); 
            }

            to{
                transform: rotateX(360deg); 
            }
        }

        ul li:nth-child(1){
            background-color:red;   
            transform: rotateX(90deg) translateZ(50px) scaleX(2);
        }

        ul li:nth-child(2){
            background-color:orange; 
            transform: rotateX(180deg) translateZ(50px) scaleX(2);
        }

        ul li:nth-child(3){
            background-color:yellow;   
            transform: rotateX(270deg) translateZ(50px) scaleX(2);
        }

        ul li:nth-child(4){
            background-color:green;
            transform: rotateX(360deg) translateZ(50px) scaleX(2);   
        }

        ul li:nth-child(5){
            background-color:cyan;
            transform: rotateY(90deg) translateZ(-100px);   
        }

        ul li:nth-child(6){
            background-color:blue;   
            transform: rotateY(90deg) translateZ(100px); 
        }
     
        ul li img{
            /*
            注意点:
            只要父元素被拉伸了,子元素也会被拉伸
            */
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <ul>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
        <li><img src="../Source/meinv2.jpg" alt=""></li>
    </ul>
</body>
</html>